<template>
  <div class="app-container">
    <CommonTable ref="commonTable" :qo="qo" :baba="this" :need-load-dict-type="['system_log_type']">
      <!-- 查询参数 -->
      <template slot="filterItems">
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model.trim="qo.keyword" clearable />
        </el-form-item>
      </template>
      <!-- 列表头 -->
      <template slot="column">
        <el-table-column label="用户" prop="nickname" />
        <el-table-column label="类型" prop="type">
          <template slot-scope="{row}">
            <el-tag :type="row.type === '1' ? 'success' : 'danger'" effect="light">{{ 'system_log_type'|transferDictValue(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="IP" prop="ip" width="120" />
        <el-table-column label="IP来源" prop="address" />
        <el-table-column label="操作" prop="action" />
        <el-table-column label="URL" prop="url" show-overflow-tooltip />
        <el-table-column label="请求参数" width="80">
          <template slot-scope="{row}">
            <el-link type="primary" @click="showMultiWindow(row, false)">查看参数</el-link>
          </template>
        </el-table-column>
        <el-table-column label="异常信息" width="80">
          <template slot-scope="{row}">
            <el-link v-if="row.type === '2'" type="danger" @click="showMultiWindow(row, true)">查看异常</el-link>
          </template>
        </el-table-column>
        <el-table-column label="系统" show-overflow-tooltip prop="system" />
        <el-table-column label="浏览器" prop="browser" />
        <el-table-column label="耗时" prop="timeCost" width="75">
          <template slot-scope="{row}">
            <el-tag v-if="row.timeCost <= 300">{{ row.timeCost }}ms</el-tag>
            <el-tag v-else-if="row.timeCost <= 1000" type="warning">{{ row.timeCost }}ms</el-tag>
            <el-tag v-else type="danger">{{ row.timeCost }}ms</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="dateCreated" />
      </template>
    </CommonTable>

    <!--请求参数-->
    <MultiFunctionalWindow ref="multiWindow" />

  </div>
</template>
<script>
import { list, get } from '@/api/system/log'
import MultiFunctionalWindow from '@/components/MultiFunctionalWindow'
import CommonTable from '@/components/CommonTable'
export default {
  name: 'Log',
  components: { CommonTable, MultiFunctionalWindow },
  data() {
    return {
      qo: { keyword: '' }
    }
  },
  created() {
  },
  methods: {
    getData(qoPro) {
      return list(qoPro)
    },
    showMultiWindow(row, isError) {
      const ld = this.$loading()
      get(row.id).then(res => {
        if (res) {
          let title = '请求参数'
          let contentType = 'JSON'
          let content = res.params
          if (isError) {
            title = '异常信息'
            contentType = ''
            content = res.errorInfo
          }
          ld.close()
          if (content) {
            this.$refs.multiWindow.show(title, content, contentType)
          } else {
            this.$message.info('无对应内容')
          }
        } else {
          ld.close()
          this.$message.info('无对应内容')
        }
      }).catch(() => { ld.close() })
    }
  }
}
</script>
